{extend name="public/base"}

{block name="css"}
<style>
    .layui-upload-img {
        width: 170px;
        height: 96px;
        margin: 0 10px 10px 0;
    }
</style>
{/block}

{block name="main"}
<div class="layui-card">
    <blockquote class="layui-elem-quote layui-quote-nm">{empty name="data"}添加{else /}编辑{/empty}管理员</blockquote>
    <form class="layui-form" action="" lay-filter="component-form-group">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>基本信息</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input"  name="name" value="{$data.name|default=''}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">URL</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input"  name="url" value="{$data.url|default='javascript:;'}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-inline">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="image">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="image_src" src="{$data.image|default=''}">
                        <p id="demoText"></p>
                        <input type="hidden" name="image" value="{$data.image|default=''}">
                    </div>
                </div>
            </div>
            <div class="layui-form-mid layui-word-aux">banner尺寸：PC版 =》 1800 * 960； WEB版 =》 750 * 500</div>
        </div>

        <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
                <div class="layui-footer" style="left: 0;">
                    <input type="hidden" name="id" value="{$data.id|default=0}">
                    <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
                </div>
            </div>
        </div>

    </form>
</div>
{/block}

{block name="js"}
<script>
    layui.config({
        base: '/layui_admin/src/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload'], function () {
        let $ = layui.$
            , form = layui.form, admin = layui.admin, layer = layui.layer, upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#image'
            ,url: '{:url("base/upload_image")}'
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                $('input[name="image"]').val(res.data.src);
                $("#image_src").attr('src', res.data.src);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        set_image_size('{$data.type|default=1}');

        //监听类型选择
        form.on('radio(banner-type)', function(data){
            set_image_size(data.value);
            return false;
        });

        function set_image_size(_value) {
            if (_value == 2) {
                $(".layui-upload-img").css({'width' : 150, 'heigth' : 100})
            } else {
                $(".layui-upload-img").css({'width' : 170, 'heigth' : 96})
            }
        }

        /* 监听提交 */
        form.on('submit(component-form-demo1)', function (data) {
            layer.load();
            //请求登入接口
            admin.req({
                url: "{:url('save_banner')}" //实际使用请改成服务端真实接口
                ,type : 'post'
                ,data: data.field
                ,done: function(res){
                    //登入成功的提示与跳转
                    layer.msg('保存成功', {
                        offset: '15px'
                        ,icon: 1
                        ,time: 1000
                    }, function(){
                        parent.location.reload(); //刷新页面
                    });
                }
            });
            return false;
        });
    });
</script>
{/block}